<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户积分管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* Add any specific styles for this page if needed */
    </style>
</head>
<body>
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">用户积分管理</h2>
        <button class="btn btn-primary" onclick="showLeaderboard()">
            <i class="fa fa-trophy"></i> 积分排行榜
        </button>
    </div>

    <!-- 用户积分信息 -->
    <div class="card">
        <div class="card-body">
            <table class="table table-bordered align-middle mb-0" id="userPointsTable">
                <thead class="table-light">
                <tr>
                    <th style="width:80px;">用户ID</th>
                    <th>总积分</th>
                    <!-- No action column for user points -->
                </tr>
                </thead>
                <tbody>
                <!-- JS填充 -->
                </tbody>
            </table>
        </div>
    </div>

</div>

<script src="/jquery-3.7.1.min.js"></script>
<script>
    // 页面加载完成后执行
    $(document).ready(function() {
        // 获取用户积分数据
        function loadUserPoints() {
            $.ajax({
                url: 'http://localhost:8082/api/user-points',
                method: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        displayUserPoints(response.data);
                    } else {
                        alert('获取用户积分数据失败：' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    alert('获取用户积分数据失败：' + error);
                }
            });
        }

        // 显示用户积分数据
        function displayUserPoints(pointsData) {
            const tbody = $('#userPointsTable tbody');
            tbody.empty();

            pointsData.forEach(point => {
                const row = `
                    <tr>
                        <td>${point.userId}</td>
                        <td>${point.totalPoints}</td>
                    </tr>
                `;
                tbody.append(row);
            });
        }

        // 初始加载数据
        loadUserPoints();
    });

    // 显示积分排行榜
    function showLeaderboard() {
        $.ajax({
            url: 'http://localhost:8082/api/user-points',
            method: 'GET',
            success: function(response) {
                if (response.code === 200) {
                    // 对数据进行排序
                    const sortedData = response.data.sort((a, b) => b.totalPoints - a.totalPoints);
                    
                    // 创建排行榜模态框
                    const modalHtml = `
                        <div class="modal fade" id="leaderboardModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">积分排行榜</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>排名</th>
                                                    <th>用户ID</th>
                                                    <th>积分</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${sortedData.map((point, index) => `
                                                    <tr>
                                                        <td>${index + 1}</td>
                                                        <td>${point.userId}</td>
                                                        <td>${point.totalPoints}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // 移除旧的模态框（如果存在）
                    $('#leaderboardModal').remove();
                    
                    // 添加新的模态框到body
                    $('body').append(modalHtml);
                    
                    // 显示模态框
                    const modal = new bootstrap.Modal(document.getElementById('leaderboardModal'));
                    modal.show();
                } else {
                    alert('获取排行榜数据失败：' + response.msg);
                }
            },
            error: function(xhr, status, error) {
                alert('获取排行榜数据失败：' + error);
            }
        });
    }
</script>
</body>
</html>